<template>
  <div>
    <p>{{yamlData}}</p>
    <h2>image: {{yamlData.image}}</h2>
    <h2>resolution: {{yamlData.resolution}}</h2>
    <h2>origin: {{yamlData.origin}}</h2>
    <h2>negate: {{yamlData.negate}}</h2>
    <h2>occupied_thresh: {{yamlData.occupied_thresh}}</h2>
    <h2>free_thresh: {{yamlData.free_thresh}}</h2>
    <h2>width: {{yamlData.width}}</h2>
    <h2>height: {{yamlData.height}}</h2>
  </div>
</template>
<script>
import yaml from 'js-yaml';

export default {
  data() {
    return {
      yamlData: {}
    };
  },
  created() {
    this.loadYamlData();
  },
  methods: {
    async loadYamlData() {
      const response = await fetch('/02f0e251-b660-463c-8d1a-810efe7780f5.yaml');
      const text = await response.text();
      this.yamlData = yaml.load(text);
    }
  }

};


</script>

